<template>
  <div class="wrapper">
    <Chart
      :id="options.id"
      style="width: 100%; height: 300px"
      :option="option"
    ></Chart>
  </div>
</template>
  
<script>
import Chart from "@/components/chart/chart.vue";

export default {
  name: "barChart",
  components: { Chart },
  props: ["chartData", "options"],
  data() {
    return {
      option: {},
    };
  },
  watch: {
    chartData: {
      handler(newValue, oldValue) {
        if (this.chartData) {
          this.setOption();
        }
      },
      deep: true,
    },
  },
  beforeDestroy() {
    this.chartData.clear && this.chartData.clear();
  },
  mounted() {},
  methods: {
    setOption() {
      this.option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
          // formatter: function (params) {
          //     // console.log(params,'pppppppppppppaaaa')
          //     return params[0].value.name + ': ' + params[0].value.value + '%';
          // }
        },
        xAxis: {
          type: "category",
          data: this.chartData.map((item) => item.name),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.chartData.map((item) => item.value),
            type: "bar",
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "#5470c6",
                    "#91cc75",
                    "#fac858",
                    "#ee6666",
                    "#73c0de",
                    "#3ba272",
                    "#fc8452",
                    "#9a60b4",
                    "#ea7ccc",
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
              },
            },
            label: {
              show: true,
              precision: 1,
              position: "top",
              valueAnimation: true,
              fontFamily: "monospace",
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>
  